<template>
	<view class="detail-container">
		<!-- 感谢信息 -->
		<view class="thank-message">
			感谢您对生鲜买菜的信任，祝您生活愉快
		</view>


		<!-- 订单信息卡片 -->
		<view class="info-card">
			<view class="info-row">
				<view class="info-label">预约时间</view>
				<view class="info-value">尽快送达（预计14:15前）</view>
			</view>

			<view class="info-row address-row">
				<view class="info-label">收货地址</view>
				<view class="info-value">
					<view>{{orderItem.address}}</view>
				</view>
			</view>

			<view class="info-row">
				<view class="info-label">生鲜农场配</view>
				<view class="info-value link-text">20g塑料袋领取 ></view>
			</view>
		</view>

		<!-- 红包信息 -->
		<view class="red-packet">
			<view class="red-packet-text">领40元红包</view>
			<view class="red-packet-btn">立即领取</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view v-for="(item, index) in orderItem.products" :key="index">
				<view class="product-item">
					<view class="product-tag">
						<image :src="item.imgSrc" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<view class="product-name">{{ item.productName }}</view>
						<view class="product-price">单价: ¥{{ item.productPrice }}/盒</view>
						<view class="product-quantity">数量: {{ item.quantity }}盒</view>
					</view>
					<view class="product-total">¥{{ item.productPrice*item.quantity }}</view>
				</view>

				<!-- 商品操作按钮 -->
				<view class="product-actions">
					<view class="action-btn refund-btn" @click="applyRefund(item)">申请退款</view>
					<view class="action-btn add-cart-btn" @click="addToCart(item)">加购物车</view>
				</view>
			</view>

			<!-- 订单金额信息 -->
			<view class="order-amount">
				<view class="amount-row">
					<text>商品金额</text>
					<text>¥{{ orderItem.actualAmount }}</text>
				</view>
				<view class="amount-row">
					<text>配送费</text>
					<text>¥{{ orderItem.deliveryFee }}</text>
				</view>
				<view class="amount-row total-row">
					<text>实付金额</text>
					<text class="total-price">¥{{orderItem.actualAmount- orderItem.deliveryFee }}</text>
				</view>
			</view>
		</view>

		<!-- 发票信息 -->
		<view class="invoice-section">
			<view class="info-row">
				<view class="info-label">发票</view>
				<view class="info-value link-text">补开发票 ></view>
			</view>
		</view>

		<!-- 订单详细信息 -->
		<view class="order-details">
			<view class="info-row">
				<view class="info-label">订单编号</view>
				<view class="info-value">{{ orderItem.orderId}}</view>
			</view>
			<view class="info-row">
				<view class="info-label">下单时间</view>
				<view class="info-value">{{ orderItem.createTime }}</view>
			</view>
			<view class="info-row">
				<view class="info-label">支付方式</view>
				<view class="info-value">{{ orderItem.paymentMethodName }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request'
	export default {
		data() {
			return {
				orderId: "",
				orderItem: {},


			}
		},
		// onLoad(options) {
		// 	if (options && options.id) {
		// 		this.orderId = options.id
		// 		this.loadOrderDetail(options.id)
		// 	}
		// },
		methods: {
			async queryUserOrderAndAddressByOrderId() {
				const res = await request({
					url: 'orderUser/queryOrderItem/' + this.orderId,
				})
				if (res.code == 200) {
					this.orderItem = res.data
				} else if (res.code == 201) {
					//跳转登录页
					uni.navigateTo({
						url: '/pages/login/login'
					})

				}
			},

			applyRefund(item) {
				uni.showToast({
					title: '申请退款功能开发中',
					icon: 'none'
				})
			},
			async addToCart(item) {
				const res = await request({
					url: 'shoppingCart/addShoppingCart',
					method: 'POST',
					data: {
						productId: item.productId,
						quantity: item.quantity,
					}
				})
				if (res.code == 200) {
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					})
				}


			},
			//获得myOrders页面传来的参数
			onLoad(options) {

				this.orderId = options.orderId
				this.queryUserOrderAndAddressByOrderId();

			}

		},
	}
</script>

<style lang="scss">
	.detail-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		background-color: #f5f5f5;
		padding: 0 15px;
		position: relative;
	}

	.back-icon {
		font-size: 20px;
		color: #333;
	}

	.icon-back,
	.icon-service {
		font-size: 20px;
	}

	.title {
		font-size: 16px;
		font-weight: 500;
	}

	.service-icon {
		font-size: 20px;
		color: #333;
	}

	.thank-message {
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
		color: #333;
		text-align: center;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
		padding: 10px 15px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;
	}

	.btn {
		font-size: 12px;
		padding: 5px 10px;
		border: 1px solid #ddd;
		border-radius: 15px;
		margin-left: 10px;
	}

	.delete-btn {
		color: #666;
	}

	.buy-again-btn {
		color: #666;
	}

	.info-card {
		background-color: #fff;
		margin-top: 10px;
	}

	.info-row {
		display: flex;
		padding: 12px 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.info-label {
		width: 80px;
		font-size: 14px;
		color: #666;
	}

	.info-value {
		flex: 1;
		font-size: 14px;
		color: #333;
		text-align: right;
	}

	.address-row .info-value {
		line-height: 1.5;
	}

	.link-text {
		color: #333;
	}

	.red-packet {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 15px;
		margin-top: 10px;
		border-bottom: 1px solid #f0f0f0;
	}

	.red-packet-text {
		font-size: 16px;
		font-weight: bold;
		color: #ff4d4f;
	}

	.red-packet-btn {
		font-size: 12px;
		padding: 5px 10px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 15px;
		color: #333;
	}

	.product-list {
		background-color: #fff;
		margin-top: 10px;
	}

	.product-item {
		display: flex;
		padding: 15px 15px 10px;
		align-items: center;
	}

	.product-tag {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.product-tag image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 14px;
		color: #333;
		margin-bottom: 5px;
	}

	.product-price,
	.product-quantity {
		font-size: 12px;
		color: #999;
	}

	.product-total {
		font-size: 14px;
		color: #333;
	}

	.product-actions {
		display: flex;
		justify-content: flex-end;
		padding: 0 15px 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.action-btn {
		font-size: 12px;
		padding: 5px 10px;
		border: 1px solid #ddd;
		border-radius: 15px;
		margin-left: 10px;
		color: #666;
	}

	.order-amount {
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
	}

	.amount-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		font-size: 14px;
		color: #666;
	}

	.amount-row:last-child {
		margin-bottom: 0;
	}

	.total-row {
		font-weight: bold;
		color: #333;
	}

	.total-price {
		color: #333;
	}

	.invoice-section,
	.order-details {
		background-color: #fff;
		margin-top: 10px;
	}
</style>